<template>
  <div class="label-item">
    <p class="label-title" flex="cross:center" 
      style="display:flex;justify-content:space-between; align-items:center;"
    >{{name}}
      <img src="../../assets/images/labels/hot.png" class="hot" v-for="index in hot" :key="index" />
      </p>
    <p v-if="more" @click="moreCallback" class="more">更多 <span  class="iconfont icon-htmal5icon45"></span></p>
  </div>
</template>

<script>
export default {
  props:{
    name:String,
    isHot:Boolean,
    more:{
      default:()=>{
        return false
      },
    },
    hot:Number,
    moreCallback:
    {
      default:()=>{
        return
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.label-item {
  display: flex;
  // margin-top:30px;
  justify-content: center;
  align-items: center;

}
.label-title {
  font-size: 24px;
    height:90px;
    color: #1a1a1a;
    padding:0 20px;
   
    // background-image: url('../../../src/assets/images/bg/label.png');
    background-size: 100% 100%;
    // background: -webkit-linear-gradient(bottom, rgba(255, 101, 8,0.1) 0%, #fff6f1 50%, rgba(255, 255, 255, 1) 100%);
    // transform:skew(-8deg) translate(10px);
        font-weight: 600;
  
}

.label-title {
    display: flex;
    align-items: center;
}

.hot {
  
  width: 30px;
  height: 30px
}
.more{
    cursor: pointer;
    &:hover {
        color: --color-primary;
    }
}
</style>